<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            margin: 0px auto;
            position: relative;
        }
        .box > div{
            width: 200px;
            height: 200px;
            border: 1px solid rgb(211, 42, 220);
            box-sizing: border-box;
            background-image: url("pic.jpg");
            position: absolute;
            background-size: 600px 600px;
        }
        .start{
            text-align: center;
            padding: 30px 0;
        }
    </style>
</head>
<body>
    <div class="start"><button>开始</button></div>
    <div class="box"></div>
    <script>
        var arr = [{
            x:0,
            y:0,
            left:0,
            top:0
        },{
            x:-200,
            y:0,
            left:200,
            top:0
        },{
            x:-400,
            y:0,
            left:400,
            top:0
        },{
            x:0,
            y:-200,
            left:0,
            top:200
        },{
            x:-200,
            y:-200,
            left:200,
            top:200
        },{
            x:-400,
            y:-200,
            left:400,
            top:200
        },{
            x:0,
            y:-400,
            left:0,
            top:400
        },{
            x:-200,
            y:-400,
            left:200,
            top:400
        },{
            x:-400,
            y:-400,
            left:400,
            top:400
        }];
        var box = document.querySelector(".box");
        for(var i = 0;i < arr.length;i++){
            var div = document.createElement("div");
            div.style.backgroundPositionX = arr[i].x + "px";
            div.style.backgroundPositionY = arr[i].y + "px";
            div.style.left = arr[i].left + "px";
            div.style.top = arr[i].top + "px";
            box.appendChild(div);
        }

        // 点击开始,设置.box中div根据arr数组的位置进行新的排序
        // 获取arr1作为一组0-arr.length-1的随机数不重复(用来做div新的排序顺序)
        // 根据新的数组arr1中元素找到arr中数据对div进行新的排序
        // 将开始按钮内容更改为恢复
        // 再次恢复来使用arr正常顺序重新定义div位置,回复正常排序
        // 获取所有.box下的div,设置允许拖拽.给每个div添加开始拖拽和结束拖拽
        // 在开始拖拽中记录被拖拽的元素的索引值,以及被拖拽元素当前所在位置的索引值; 
        // 在结束拖拽中,找到结束元素的索引值与结束元素所在位置索引值
        // 设置两个标签根据位置索引值得到的位置进行交换位置
        
        // var but = document.querySelector("button");
        // var divs = document.querySelectorAll(".box > div");
        // // 设置一个变量记录button点击的次数
        // var cont = 0;
        // but.onclick = function(){
        //     // 记录次数
        //     cont++;
        //     // 根据点击次数判断是偶数次数时执行的代码与奇数次数执行的不一样
        //     if(cont % 2 == 0){
        //         but.innerHTML = "开始";
        //         // 循环获取到每个div,让div按照顺序找到arr中的偏移量,进行按顺序排序,恢复正常顺序
        //         for(var k = 0;k < divs.length;k++){
        //             divs[k].style.left =arr[k].left + "px";
        //             divs[k].style.top =arr[k].top + "px";
        //         }
        //         // 如果这个if内代码执行,则结束整个函数代码的执行
        //         return;
        //     }
        //     var arr1 = [];
        //     for(var i = 0;i < 1000;i++){
        //         // 获取一个0-8之间的随机数
        //         var num = Math.floor(Math.random() * arr.length);
        //         // 判断如果arr1中没有这个值, 就进行添加
        //         if(arr1.indexOf(num) < 0) arr1.push(num);
        //         // 每次添加新值,就判断一下,arr1的长度够不够,够了就跳出循环
        //         if(arr1.length == arr.length) break;
        //     }
        //     // 得到的新的排序顺序
        //     console.log(arr1);
        //     // 获取一个0-8的数(要获取每个div标签 以及每个arr1内的内容)
        //     for(var k = 0;k < divs.length;k++){
        //         // 分别给每个div设置新的位置  在arr中根据arr1中打乱的索引值找到移动的偏移量设置给div
        //         divs[k].style.left =arr[arr1[k]].left + "px";
        //         divs[k].style.top =arr[arr1[k]].top + "px";
        //     }
        //     // 设置but内容更改
        //     but.innerHTML = "恢复";
        // }
    </script>
</body>
</html>